<template>
    <div class="continer">
        <d-from :rules="rules" :model="formData">
            <div>{{ drop1 || 'drop1' }}</div>
            <DropDown dict-name="zyf" v-model:value="drop1"></DropDown>
            <div>{{ drop2 || 'drop2' }}</div>
            <DropDown dict-name="zyf" v-model:value="drop2" prop-key="name"></DropDown>
            <div>{{ select || 'select' }}</div>
            <Select v-model:value="select"></Select>
            <d-input type="password"></d-input>
            <div>{{ password }}</div>
            <d-form-item label="密码" prop="password">
                <d-password v-model:value="formData.password"></d-password>                
            </d-form-item>
        </d-from>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
const drop1 = ref('');
const drop2 = ref('');
const select = ref('Wenzhou');

const formData = reactive({
    password: ''
})

const rules = {
    password: [
        { required: true, message: '请填写密码' },  //  必填
        { validator: /\s/, message: '请输入正确内容' },   //  正则表达式
        { func: () => { return true }, message: '函数' }
    ]
}
</script>

<style lang="scss" scoped></style>